import React, { useEffect } from 'react'
import { Layout, PersonInfo, OrderContainer, OroderBody } from './style';
import my from './my.png';

const Index = () => {

  return (
    <Layout>
      <PersonInfo><img src={my} width="100%" height="100%" /></PersonInfo>
      <OrderContainer>
        <div className='order-top'>
          <div className='order-top_left'>
            <svg t="1641990414187" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1972" width="16" height="16"><path d="M455.111111 56.888889h113.777778c17.066667 0 28.444444-11.377778 28.444444-28.444445s-11.377778-28.444444-28.444444-28.444444h-113.777778c-17.066667 0-28.444444 11.377778-28.444444 28.444444s11.377778 28.444444 28.444444 28.444445z" p-id="1973" fill="#2c2c2c"></path><path d="M910.222222 0h-199.111111c-17.066667 0-28.444444 11.377778-28.444444 28.444444s11.377778 28.444444 28.444444 28.444445h199.111111c17.066667 0 28.444444 11.377778 28.444445 28.444444v853.333334c0 17.066667-11.377778 28.444444-28.444445 28.444444H113.777778c-17.066667 0-28.444444-11.377778-28.444445-28.444444V85.333333c0-17.066667 11.377778-28.444444 28.444445-28.444444h199.111111c17.066667 0 28.444444-11.377778 28.444444-28.444445s-11.377778-28.444444-28.444444-28.444444H113.777778C65.422222 0 28.444444 36.977778 28.444444 85.333333v853.333334c0 48.355556 36.977778 85.333333 85.333334 85.333333h796.444444c48.355556 0 85.333333-36.977778 85.333334-85.333333V85.333333c0-48.355556-36.977778-85.333333-85.333334-85.333333z" p-id="1974" fill="#2c2c2c"></path><path d="M739.555556 455.111111H284.444444c-17.066667 0-28.444444 11.377778-28.444444 28.444445s11.377778 28.444444 28.444444 28.444444h455.111112c17.066667 0 28.444444-11.377778 28.444444-28.444444s-11.377778-28.444444-28.444444-28.444445zM739.555556 654.222222H284.444444c-17.066667 0-28.444444 11.377778-28.444444 28.444445s11.377778 28.444444 28.444444 28.444444h455.111112c17.066667 0 28.444444-11.377778 28.444444-28.444444s-11.377778-28.444444-28.444444-28.444445zM739.555556 256H284.444444c-17.066667 0-28.444444 11.377778-28.444444 28.444444s11.377778 28.444444 28.444444 28.444445h455.111112c17.066667 0 28.444444-11.377778 28.444444-28.444445s-11.377778-28.444444-28.444444-28.444444z" p-id="1975" fill="#2c2c2c"></path></svg>
            <span className='right_desc'>购买</span>
          </div>
          <div className='order-top_right'>
            <span className='left_desc'>全部订单</span>
            <span className='iconfont'>&#xe662;</span>
          </div>
        </div>
        <div className='order-body'>
          <div className='body_payment'>
            <svg t="1641993004047" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3369" width="24" height="24"><path d="M853.333333 256v512H170.666667V256h682.666666m42.666667-85.333333H128c-23.466667 0-42.666667 19.2-42.666667 42.666666v597.333334c0 23.466667 19.2 42.666667 42.666667 42.666666h768c23.466667 0 42.666667-19.2 42.666667-42.666666V213.333333c0-23.466667-19.2-42.666667-42.666667-42.666666z" p-id="3370" fill="#000000"></path><path d="M853.333333 362.666667H170.666667v149.333333h682.666666v-149.333333z" p-id="3371" fill="#000000"></path></svg>
            <div>待付款</div>
          </div>
          <div className='body_convey'>
            <svg t="1641993041381" className="icon" viewBox="0 0 1102 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5346" width="24" height="24"><path d="M153.15597332 364.76904966v470.430984a93.245511 93.245511 0 0 0 93.245511 93.234815h635.765822a93.245511 93.245511 0 0 0 93.245511-93.234815v-100.657663a33.905514 33.905514 0 1 1 67.800332 0v100.657663a161.045843 161.045843 0 0 1-161.045843 161.045843H246.40148432A161.056539 161.056539 0 0 1 85.33424932 835.20003366V330.86353566a33.552554 33.552554 0 0 1 3.561684-15.134481l0.342263-0.93053L173.03936432 115.39773766A118.647907 118.647907 0 0 1 282.42475632 42.66666666H846.13333832a118.658603 118.658603 0 0 1 109.385392 72.731071l83.747689 199.400787a36.033967 36.033967 0 0 1-19.252342 47.168239c-6.781103 2.331673-6.781103 2.331673-13.990036 2.802286z m805.079476-67.821724l-65.244049-155.32362a50.858271 50.858271 0 0 0-46.858062-31.167403H282.38197332a50.858271 50.858271 0 0 0-46.879454 31.146012l-65.244049 155.323619z m0 0" p-id="5347" fill="#2c2c2c"></path><path d="M742.05303732 593.62592066l-71.372711-73.747167a33.909792 33.909792 0 1 1 48.729817-47.168239l102.443853 105.887883a55.104482 55.104482 0 0 1 0.29948 76.335537l-102.561505 107.620594a33.905514 33.905514 0 0 1-49.072082-46.783192l51.746018-54.334388H331.16526932a33.905514 33.905514 0 1 1 0-67.811028z m0 0" p-id="5348" fill="#2c2c2c"></path></svg>
            <div>待发货</div>
          </div>
          <div className='body_receipt'>
            <svg t="1641993069467" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6380" width="24" height="24"><path d="M807.990806 181.429119 378.768091 181.429119c-41.024345 0-74.258261 33.122375-74.258261 73.933873l0 122.296347-158.666696 91.373057 0.191358 0.323365c-4.329609 3.148713-7.316639 8.011464-7.326872 13.765515l0 248.28376 0 0.039909c0 10.737552 7.79043 19.498076 17.428951 19.498076 9.627265 0 17.417695-8.760524 17.417695-19.498076l0-0.039909L173.554266 493.071905l156.941402-90.385567c7.589862-2.684132 13.08911-9.688663 13.08911-18.164708 0-0.040932-0.00921-0.061398-0.00921-0.081864l0.00921 0 0-125.181047c0-21.475104 17.509792-38.895869 39.087227-38.895869l421.401586 0c21.598924 0 39.076994 17.419741 39.076994 38.895869l0 412.562267c0 0.039909 0 0.079818 0 0.079818 0 10.739599 8.760524 19.458167 19.559475 19.458167 10.797927 0 19.537985-8.718569 19.537985-19.458167 0 0 0-0.039909 0-0.079818L882.248044 255.361969C882.248044 214.550471 849.005942 181.429119 807.990806 181.429119z" p-id="6381" fill="#2c2c2c"></path><path d="M276.847817 548.981263c-10.314926 0.038886-18.700921 8.396227-18.700921 18.649755 0 10.254551 8.385994 18.61087 18.720364 18.61087 0.061398 0 0.141216-0.040932 0.201591-0.040932l98.366332 0c39.652092 0.201591 37.392632-37.21867 37.392632-37.21867l0-77.487815c0-10.273994-8.376785-18.608823-18.691711-18.608823-10.334369 0-18.709107 8.334829-18.709107 18.608823 0 0.040932 0.008186 0.081864 0.008186 0.121773l0 77.366042L276.847817 548.982286z" p-id="6382" fill="#2c2c2c"></path><path d="M718.09131 649.618311c-49.552579 0-90.121554 37.21867-96.118128 84.974323l-196.197474-0.079818c-6.034437-47.714721-46.596248-84.894506-96.127338-84.894506-53.668317 0-97.347119 43.476187-97.347119 96.92347 0 53.40635 43.678802 96.883561 97.347119 96.883561 46.454008 0 85.309968-32.615838 94.936209-76.012208l198.61964 0.079818c9.668197 43.355437 48.486294 75.93239 94.888114 75.93239 53.689806 0 97.346095-43.476187 97.346095-96.883561C815.437405 693.095521 771.781116 649.618311 718.09131 649.618311zM329.64837 802.37132c-30.921243 0-56.081273-25.068955-56.081273-55.82954 0-30.801517 25.159006-55.828516 56.081273-55.828516s56.092529 25.027 56.092529 55.828516C385.7409 777.302365 360.569614 802.37132 329.64837 802.37132zM718.09131 802.37132c-30.92329 0-56.073086-25.068955-56.073086-55.82954 0-30.801517 25.149796-55.828516 56.073086-55.828516s56.090483 25.027 56.090483 55.828516C774.182816 777.302365 749.0146 802.37132 718.09131 802.37132z" p-id="6383" fill="#2c2c2c"></path></svg>
            <div>待收货</div>
          </div>
        </div>
      </OrderContainer>
      <OroderBody>
        <div className='order-body'>
          <div className='order-item'>
            <span>
              <svg t="1641997821799" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7393" width="32" height="32"><path d="M885.2 354.3c-20.4-48.2-49.6-91.5-86.8-128.7-37.2-37.2-80.5-66.4-128.7-86.8-50-21.1-103-31.8-157.7-31.8-54.7 0-107.7 10.7-157.7 31.8-48.2 20.4-91.5 49.6-128.7 86.8-37.2 37.2-66.4 80.5-86.8 128.7-21.1 50-31.8 103-31.8 157.7 0 73 19.7 144.6 56.8 207 8.5 14.2 26.9 18.9 41.1 10.4 14.2-8.5 18.9-26.9 10.4-41.1C183.7 635.2 167 574.2 167 512c0-190.2 154.8-345 345-345s345 154.8 345 345-154.8 345-345 345c-63.1 0-124.8-17.2-178.5-49.7-14.2-8.6-32.6-4.1-41.2 10.1-8.6 14.2-4.1 32.6 10.1 41.2C365.5 896.8 438 917 512 917c54.7 0 107.7-10.7 157.7-31.8 48.2-20.4 91.5-49.6 128.7-86.8 37.2-37.2 66.4-80.5 86.8-128.7 21.1-49.9 31.8-103 31.8-157.7 0-54.7-10.7-107.7-31.8-157.7z" fill="#2c2c2c" p-id="7394"></path><path d="M653.2 334.8c-11.7-11.7-30.8-11.7-42.4 0L512 433.5l-98.7-98.7c-11.7-11.7-30.8-11.7-42.4 0-11.7 11.7-11.7 30.8 0 42.4L482 488.3v0.7h-92.4c-7 0-12.6 5.7-12.6 12.6v24.7c0 7 5.7 12.6 12.6 12.6H482v37h-92.4c-7 0-12.6 5.7-12.6 12.6v24.7c0 7 5.7 12.6 12.6 12.6H482v62.5c0 16.5 13.5 30 30 30s30-13.5 30-30V626h92.4c7 0 12.6-5.7 12.6-12.6v-24.7c0-7-5.7-12.6-12.6-12.6H542v-37h92.4c7 0 12.6-5.7 12.6-12.6v-24.7c0-7-5.7-12.6-12.6-12.6H542v-0.5-0.2l111.2-111.2c11.6-11.8 11.6-30.9 0-42.5z" fill="#2c2c2c" p-id="7395"></path></svg>
              <span>账户</span>
            </span>
            <span className='iconfont'>&#xe662;</span>
          </div>
          <div className='order-item'>
            <span>
              <svg t="1641997979363" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8511" width="32" height="32"><path d="M885.4 695.6l-0.1 115.7-747.5 0.2V695.6c85.2-17.3 149.5-92.8 149.5-182.9-0.1-88.7-62.6-165-149.5-182.9l0.1-115.8 747.5-0.3v116c-87 17.9-149.4 94.3-149.5 182.9 0.1 88.8 62.5 165.2 149.5 183m37.4-294.9h37.4V213.8c-0.1-41.2-33.6-74.5-74.9-74.4H137.9c-41.2-0.1-74.8 33.2-74.9 74.4v186.9h37.4c61.9 0 112.1 50.2 112.1 112 0 61.7-50.3 112-112.1 112H63v186.9c0.1 41.2 33.6 74.5 74.8 74.4h747.4c41.2 0.1 74.7-33.2 74.9-74.4V624.7h-37.4c-61.8 0-112.1-50.2-112.1-112 0-61.7 50.4-112 112.2-112" p-id="8512" fill="#2c2c2c"></path><path d="M623.7 527.7c14.4 0 26.2-11.7 26.2-26.1 0-14.4-11.7-26.1-26.2-26.1h-75.2c0.1-0.1 0.2-0.1 0.3-0.2l74.8-74.7c6.6-6.6 9.2-16.2 6.8-25.2-2.4-9-9.5-16.1-18.5-18.5-9-2.4-18.7 0.2-25.3 6.8l-74.8 74.7-0.2 0.3-0.2-0.3-74.8-74.7c-10.2-10.2-26.8-10.2-37 0s-10.2 26.8 0 37l74.8 74.7c0.1 0.1 0.2 0.1 0.3 0.2h-75.2c-14.5 0-26.2 11.7-26.2 26.1 0 14.4 11.7 26.1 26.2 26.1h86v59.7h-86c-9.3 0-18 5-22.7 13.1-4.7 8.1-4.7 18 0 26.1 4.7 8.1 13.3 13.1 22.7 13.1h86V662c0 14.4 11.7 26.1 26.2 26.1 14.4 0 26.2-11.7 26.2-26.1v-22.4h86c9.3 0 18-5 22.7-13.1 4.7-8.1 4.7-18 0-26.1-4.7-8.1-13.3-13.1-22.7-13.1h-86v-59.7h85.8z m0 0" p-id="8513" fill="#2c2c2c"></path></svg>
              <span>卡券</span>
            </span>
            <span className='iconfont'>&#xe662;</span>
          </div>
          <div className='order-item'>
            <span>
              <svg t="1641998043613" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9490" width="32" height="32"><path d="M518.4 48c-214.4 0-390.4 176-390.4 393.6 0 48 16 99.2 41.6 156.8 28.8 57.6 70.4 118.4 118.4 182.4 35.2 41.6 73.6 83.2 108.8 121.6 12.8 12.8 25.6 25.6 35.2 35.2 6.4 6.4 12.8 9.6 12.8 12.8l0 0c38.4 38.4 102.4 38.4 137.6 0 3.2-3.2 6.4-6.4 12.8-12.8 9.6-9.6 22.4-22.4 35.2-35.2 38.4-38.4 73.6-80 108.8-121.6 51.2-60.8 92.8-124.8 118.4-182.4 28.8-57.6 41.6-108.8 41.6-156.8C908.8 224 732.8 48 518.4 48zM822.4 576c-25.6 54.4-64 112-115.2 172.8-35.2 41.6-70.4 83.2-105.6 118.4-12.8 12.8-25.6 25.6-35.2 35.2-6.4 6.4-9.6 9.6-12.8 12.8-19.2 19.2-51.2 19.2-70.4 0l0 0c-3.2-3.2-6.4-6.4-12.8-12.8-9.6-9.6-22.4-22.4-35.2-35.2-35.2-38.4-73.6-76.8-105.6-118.4-48-60.8-86.4-118.4-115.2-172.8-25.6-51.2-38.4-96-38.4-134.4 0-192 153.6-345.6 342.4-345.6 188.8 0 342.4 153.6 342.4 345.6C860.8 480 848 524.8 822.4 576z" p-id="9491" fill="#2c2c2c"></path><path d="M518.4 262.4c-96 0-169.6 76.8-169.6 172.8 0 96 76.8 172.8 169.6 172.8s169.6-76.8 169.6-172.8C688 339.2 614.4 262.4 518.4 262.4zM518.4 556.8c-67.2 0-121.6-54.4-121.6-124.8s54.4-124.8 121.6-124.8c67.2 0 121.6 54.4 121.6 124.8S585.6 556.8 518.4 556.8z" p-id="9492" fill="#2c2c2c"></path></svg>
              <span>地址管理</span>
            </span>
            <span className='iconfont'>&#xe662;</span>
          </div>
          <div className='order-item'>
            <span>
              <svg t="1641998121893" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10472" width="32" height="32"><path d="M821.333333 800H547.584l-86.464 96.074667a32 32 0 1 1-47.573333-42.816l96-106.666667A32 32 0 0 1 533.333333 736h288a53.333333 53.333333 0 0 0 53.333334-53.333333V234.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333334v448a53.333333 53.333333 0 0 0 53.333334 53.333333h138.666666a32 32 0 0 1 0 64H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V234.666667c0-64.8 52.533333-117.333333 117.333334-117.333334h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333334v448c0 64.8-52.533333 117.333333-117.333334 117.333333zM704 341.333333a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384zM512 512a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h192z" p-id="10473" fill="#2c2c2c"></path></svg>
              <span>消息通知</span>
            </span>
            <span className='iconfont'>&#xe662;</span>
          </div>
          <div className='order-item'>
            <span>
              <svg t="1641998160832" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11461" width="32" height="32"><path d="M554.666667 768v-42.666667h85.333333v42.666667h85.333333v-320C725.333333 341.333333 640 256 533.333333 256S341.333333 341.333333 341.333333 448V853.333333H213.333333v-256h42.666667v-149.333333C256 294.4 379.733333 170.666667 533.333333 170.666667S810.666667 294.4 810.666667 448V597.333333h42.666666v256h-298.666666v-85.333333z" fill="#2c2c2c" p-id="11462"></path></svg>
              <span>客服中心</span>
            </span>
            <span className='iconfont'>&#xe662;</span>
          </div>
          <div className='order-item'>
            <span>
              <svg t="1641998207192" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12240" width="32" height="32"><path d="M512 318c-58.9 0-106.7 47.8-106.7 106.7 0 43.7 26.4 81.2 64 97.7v137c0 23.6 19.1 42.7 42.7 42.7s42.7-19.1 42.7-42.7v-137c37.6-16.5 64-53.9 64-97.7 0-58.9-47.8-106.7-106.7-106.7z" fill="#2c2c2c" p-id="12241"></path><path d="M843.9 199.5L553.8 55.4c-26.1-13-57.4-13-83.5 0L180.1 199.5c-32.1 16-52.1 48.2-52.1 84.1v263.5c0 121.2 59 236.3 161.9 315.5 74.4 57.2 200.4 110.1 205.7 112.4 5.3 2.2 10.9 3.3 16.4 3.3 5.6 0 11.2-1.1 16.4-3.3 5.3-2.2 131.3-55.1 205.7-112.4C837 783.4 896 668.4 896 547.1V283.6c0-35.9-20-68.1-52.1-84.1z m-33.2 347.6c0 94.6-46.9 184.9-128.6 247.9-50.9 39.2-134.8 78.4-170.1 94.1-35.2-15.7-119-54.8-170-94.1-81.7-63-128.6-153.4-128.6-247.9V283.6c0-3.2 1.9-6.2 4.7-7.6l290.1-144.1c2.4-1.2 5.2-1.2 7.6 0L805.9 276c2.9 1.4 4.7 4.4 4.7 7.6v263.5z" fill="#2c2c2c" p-id="12242"></path></svg>
              <span>隐私条款</span>
            </span>
            <span className='iconfont'>&#xe662;</span>
          </div>
        </div>
      </OroderBody>
      <div className='order-btn'>
        退出登录
      </div>
    </Layout>
  )
};

export default Index;

